<template>
	<div v-infinite-scroll="moreList"
        infinite-scroll-disabled="loading"
        infinite-scroll-immediate-check = "true"
        infinite-scroll-distance="100">
		<div class="comment_all" @click="hide">
            <div  v-if="replyStyle==1" class="whiteBg">
                <div class="aboutComments" style="margin: 0;text-indent: 1rem;">
                    关于{{usrName}}对商家的评论 ({{commentList.length||0}})
                </div>
            </div>
		</div>
		<ul style="padding-right: 1rem;">
            <li v-for="item in commentList" v-if="commentList" >
                <div class="comter_avatar"><img :src="item.usrPicUrl"></div>
                <div class="comt_info">
                    <div class="comt_tit comt_bot_border" @click="hide">
                        <span class="comt_date">{{item.crtTime | endTime}}</span>
                        {{item.usrName}}
                    </div>
                    <div class="comt_text">
                        <p @click="lookMore(item)">{{item.comDsc|comdeCode}}</p>
                        <div class="comt_img clearfix">
                            <span v-for="imgItem in item.commPicUrl" @click="previewImage(imgItem,item.commPicUrl)"><img :src="imgItem"/></span>
                        </div>
                    </div>
                    <div class="comt_btn">
                            <!-- <span class="comt_btn_p">
                                <svg class="icon" aria-hidden="true">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-dianzan"></use>
                                </svg>点赞</span> -->
                            <span @click="publishFocus(item)">
                                <svg class="icon" aria-hidden="true">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-pinglun1"></use>
                                </svg>评论</span>
                    </div>
                    <!-- <div class="praise_list">
                        <i class="icon iconfont icon-dianzan"></i>
                        <a href="#">糖炒栗子，</a><a href="#">券享用户10**10，</a><a href="#">券享用户14**32，</a>
                    </div> -->
                    <!-- 回复评论 -->
                    <div v-if="item.replyDsc" class="reply_list" @click="hide">
                        <i class="icon iconfont icon-pinglun left"></i>
                        <div class="reply_cont limit">
                            <div class="reply_item" v-for="replyItem in item.replyDsc">
                                <div class="reply_person"><span>{{replyItem.usrName}}</span>回复<span v-if="replyItem.replyUsrName!=replyItem.usrName">{{replyItem.replyUsrName}}</span><span class="right">{{replyItem.crtTime | endTime}}</span></div>
                                <p>{{replyItem.dsc|comdeCode}}</p>
                            </div>

                        </div>
                        <!-- <div v-if="item.replyDsc!=undefined" class="reply_look"> -->
                        <div v-if="item.replyDsc&&item.replyDsc.length>=3" class="reply_look">
                            <a @click="lookMore(item)">查看更多</a>
                            <!--<span v-if="!allStatus&&item.replyDsc&&item.replyDsc.length>=3">|</span>
                            <a @click="jumpShop(item)" v-if="!allStatus">查看关于商家评论</a>-->
                        </div>
                    </div>
                    <!--<div v-if="!item.replyDsc||item.replyDsc.length<3" class="reply_look">
                        <a @click="jumpShop(item)" v-if="!allStatus">查看关于商家评论</a>
                    </div>-->
                </div>
            </li>

        </ul>
        <!--<comments v-if="replyStyle==1" @clickPub="publishFocus" @clickBlur="hide" :commentList="shopComments" :replyStyle="replyStyle" :mchtId="mchtId" :allStatus="allStatus"></comments>-->
        <!-- 评论框 -->
        <div class="comment_box" v-show="boxStatus">
            <input ref="inputId" v-model="commentCont" @focus="inputFixed" class="left" type="text" placeholder="写点评论吧" />
            <span @click="publish()" class="comment_box_btn right">发表</span>
        </div>
        <go-top v-show="goTopState" ref="goTopId"></go-top>
        <div class="loading-box" v-if="moreInfo">
            <list-loading v-on:clickEvent="clickMoreList" :noMoreCoupon="noMoreCoupon"></list-loading>
        </div>
        <div class="lastInfoMore" v-if="!moreInfo">没有更多</div>
	</div>
</template>
<script>
	import comments from '../../componentes/global/comments.vue'
    import getData from '../../service/getData.js'
    import getData2 from '../../service/getData2.js'
	import * as types from '../../vuex/types.js'
    import listLoading from '../../componentes/global/listLoading.vue'
	import { mapState } from 'vuex'
    import { Toast } from 'mint-ui'
	export default{
        data(){
            return{
                replyStyle:0,
                replyNum:'',
                replyShopNum:'',
                loading:true,
                noMoreCoupon:true,
                indexCom:3,
                commId:'',
                commentUsrd:'',
                commentCont:'',
                boxStatus:false,
                mchtId:'',
                picture:'',
                allStatus:true,
                goTopState:false,
                moreInfo:true,
                commentList:[],
                usrName:'',
            }
        },
		components: {
			comments,
      listLoading
		},
		methods:{
            shopCommentsList:function(){
                var me=this;
                var imgStrs= [];
                var urlArr=[]
               urlArr=location.href.split('/')
                getData.shopCommentMyself({method:'post',data:{aoData:"",mchtId:urlArr[urlArr.length-3],usrId:urlArr[urlArr.length-2]}}).then(function(rep){
                    // console.log(rep.content);
                    //图片接口截取
                if(rep.content.total==0){
                    me.moreInfo=false;
                }
                if(rep.content.comments){
                  for (var i = rep.content.comments.length - 1; i >= 0; i--) {
                    if(rep.content.comments[i].commPicUrl){
                        imgStrs=rep.content.comments[i].commPicUrl.split(",");
                        // imgStrs.length=imgStrs.length-1;
                        rep.content.comments[i].commPicUrl=imgStrs;
                        // console.log(rep.content.commList[i].commPicUrl)
                    }
                }
                    	console.log(rep.content.comments)
                    	me.commentList=rep.content.comments
                    	me.usrName=rep.content.comments[0].usrName
                        if(me.commentList.length < me.couponCommentsLimit){
                            setTimeout(function(){me.noMoreCoupon = true;},300);
                             me.moreInfo=false
                        }
                        if(me.commentList.length == me.couponCommentsLimit){//如果列表数据够10条，开启下拉加载
                        	me.moreInfo=true;
                            me.loading = false;
                            me.noMoreCoupon = false;
                        }
                    }else{
                        setTimeout(function(){me.noMoreCoupon = true;},300);
                    }
                    me.replyShopNum=rep.content;
                }).catch(function(rep){
                    setTimeout(function(){me.noMoreCoupon = true;},300);
                });
            },
            clickMoreList:function(){
                // console.log('adsf')
                if(!this.noMoreCoupon){//防止重复点击
                    return
                }
                var me=this;
                // console.log('qwe')
                this.noMoreCoupon = false;
                    me.shopCommentsList();

            },
            moreList:function(){
                this.loading = true;
                this.noMoreCoupon = true;
                this.clickMoreList();

            },

            // 点评论聚焦
            publishFocus(data){
                this.commId=data.commId;
                this.commentUsrd=data.usrId;
                this.boxStatus=true;
                this.$refs.inputId.focus();

            },
            // 点评论失焦
            hide:function(){
                this.boxStatus=false;
            },
            // input聚焦
            inputFixed:function(){
                let me=this;
                let inputEl=me.$refs.inputId;
                setTimeout(function(){
                    inputEl.scrollIntoView(true);
                },100)
                if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){
                    setTimeout(function(){
                        // console.log(document.body.scrollHeight)
                        window.scrollTo(0,document.body.scrollHeight);
                    },500)
                }
            },
            //发表
            publish:function(e){
                console.log(this.commId+'/'+new Date().format("YMMddhhmmss")+'/'+this.commentCont);
                var me=this;
                if (me.commentCont=='') {
                    Toast({
                        message: '内容不能为空',
                        duration: 800
                    });
                    return false;
                }
                if (me.commentUsrd==me.userInfo.usrId) {
                    Toast({
                        message: '不能回复自己',
                        duration: 800
                    });
                    return;
                }
                getData2.commentReply({'method':'post',data:{commId:me.commId,dsc:me.commentCont}},me.userInfo.usrId).then(rep=>{
                    if(rep.respCode == '00'){
                        // console.log('发表成功');
                        Toast({
                            message: '回复成功',
                            duration: 800
                        });
                        me.commentCont=''
                        me.boxStatus=false;
                        if (me.replyStyle==0) {
                            me.$store.commit("COUPON_PAGES");
                           me.couponCommentsList();
                       }else if(me.replyStyle==1){
                            me.$store.commit("COUPON_PAGES");
                           me.shopCommentsList();
                       };
                    }else{
                        Toast({
                            message: '回复失败',
                            duration: 800
                        });
                        me.boxStatus=false;
                    }
                })
            },
            //监听滚动事件
            handleScroll() {
                var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
                var scrollHeight=document.documentElement.clientHeight||document.body.scrollTop;
                console.log(scrollHeight)
                if (scrollTop>=scrollHeight+50) {
                    this.goTopState = true
                } else {
                    this.goTopState = false
                }
                //回到顶部过程中用户滚动滚动条，停止定时器
                if (scrollTop <= 0) {
                    if (this.$refs.goTopId) {
                        this.$refs.goTopId.clear();
                    }
                };

            },
              previewImage:function(id,items){
                let me = this;
                wx.previewImage({
                    current: id, // 当前显示图片的http链接
                    urls: items // 需要预览的图片http链接列表
                });
            },
            lookMore:function(params){
            	   let me = this;
                // this.$router.push({'name':'commentDetail',params:{commId:params.commId,mchtId:me.mchtId,replyStyle:1}});
                if (this.replyStyle==0) {
                    // this.$router.push({'name':'commentDetail',params:{commId:params.commId,replyStyle:0}});
                    this.$router.push({'name':'commentDetail',query:{commId:params.commId,usrId:params.usrId,replyStyle:0}});
                }else if (this.replyStyle==1){
                    // this.$router.push({'name':'commentDetail',params:{commId:params.commId,mchtId:me.mchtId,replyStyle:1}});
                    this.$router.push({'name':'commentDetail',query:{commId:params.commId,mchtId:me.mchtId,replyStyle:1}});
                }
            }

        },
		beforeRouteLeave(to, from, next){
            // 避免返回时未清除定时器
            if (this.$refs.goTopId) {
                this.$refs.goTopId.clear();
            }
            window.removeEventListener('scroll', this.handleScroll);
            next()
        },
        computed:{
            ...mapState({
                    userInfo:state => state.user.userInfo,
                    couponInfo:state => state.coupon.couponInfo,
                    couponComments:state => state.coupon.couponComments,
                    couponCommentsPage:state => state.coupon.couponCommentsPage,
                    couponCommentsLimit:state => state.coupon.couponCommentsLimit,
                    shopComments:state => state.coupon.shopComments,
                    shopCommentsPage:state => state.coupon.shopCommentsPage,
                    shopCommentsLimit:state => state.coupon.shopCommentsLimit,
            })
        },
        created:function(){
					this.$emit('header-info', {
			      title: '评论',
			      isBack: true,
			      isMessage: false
			    })
            // 监视滚动
            window.addEventListener('scroll', this.handleScroll);
            this.replyStyle=this.$route.params.replyStyle;
            this.mchtId=this.$route.params.mchtId;
            this.$store.commit(types.SHOP_COMMENTS);//初始化列表
            this.$store.commit(types.COUPON_COMMENTS);//初始化列表
            this.$store.commit("COUPON_PAGES");//评论分页初始化
            this.$store.commit(types.GET_SCORLL_STATUS,true);
            this.clickMoreList()

        }
	}
</script>
<style>

</style>
